<template>
    <div class="production-plan">
      <el-button type="success" @click="addjihau" class="save-button">保存主表单和明细</el-button>
      <h3 class="title">过滤过程监控</h3>
  
      <!-- 基本信息 -->
      <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="120px" class="form-container">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="设备名称" style="margin-bottom: 20px;">
              <el-input v-model="formData.equipment_name" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备编号" style="margin-bottom: 20px;">
              <el-input v-model="formData.equipment_number" placeholder="请输入设备编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备状态" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.equipment_status"
                placeholder="请选择设备状态"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运行时间" prop="running_time" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.running_time"
                type="date"
                required
                placeholder="请选择运行时间"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="温度" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.temperature" placeholder="请输入温度" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="压力" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.pressure" placeholder="请输入压力" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="流量" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.flow" placeholder="请输入流量" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="液位" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.liquid_level" placeholder="请输入液位" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="浊度" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.turbidity" placeholder="请输入浊度" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="浓度" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.concentration" placeholder="请输入浓度" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="过滤速度" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.filtration_speed" placeholder="请输入过滤速度" :min="0" :step="1" />
            </el-form-item>
          </el-col>
  
          <el-col :span="8">
            <el-form-item label="压力变化" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.pressure_change" placeholder="请输入压力变化" :min="0" :step="1" />
            </el-form-item>
          </el-col>
  
          <el-col :span="8">
            <el-form-item label="酒液澄清度" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.wine_clarity" placeholder="请输入酒液澄清度" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微生物指标" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.microorganism_index" placeholder="请输入微生物指标" :min="0" :step="1" />
            </el-form-item>
          </el-col>
  
          <el-col :span="8">
            <el-form-item label="流量传感器" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.flow_sensor"
                placeholder="请选择流量传感器"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions5"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微生物检测" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.microorganism_detection"
                placeholder="请选择微生物检测"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions6"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="压力传感器" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.pressure_sensor"
                placeholder="请选择压力传感器"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions7"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="定期取样检测" style="margin-bottom: 20px;">
              <el-input v-model="formData.regular_sampling_detection" placeholder="请输入定期取样检测" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作时间" prop="operation_time" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.operation_time"
                type="date"
                required
                placeholder="请选择操作时间"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作人" style="margin-bottom: 20px;">
              <el-input v-model="formData.operators" placeholder="请输入操作人" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useRouter, useRoute } from 'vue-router';
  import { Materialread, Materialwrite } from '@/axios/axiosHelper';
  import axios from 'axios';
  import { th } from 'element-plus/es/locales.mjs';
  
  const formRef = ref(null);
  const currentUser = ref("admin");
  const router = useRouter();
  const route = useRoute();
  
  // 主表单数据
  const formData = reactive({
        "id":  route.params.id,
        "equipment_name": "",
        "equipment_number": "",
        "equipment_status": "",
        "running_time": "",
        "temperature": 0,
        "pressure": 0,
        "flow": 0,
        "liquid_level": 0,
        "turbidity": 0,
        "concentration": 0,
        "filtration_speed": 0,
        "pressure_change": 0,
        "wine_clarity": 0,
        "microorganism_index": 0,
        "flow_sensor": "",
        "microorganism_detection": "",
        "pressure_sensor": "",
        "regular_sampling_detection": "",
        "operation_time": new Date().toISOString(),
        "operators": currentUser.value,
        "isDel": true
  });





const getProductionById = (id) => {
console.log('查看过程监控反填数据:', id);
Materialread.get('g-read/api/ProcessMonitorin/FTProcessMonitoring', {
    params:{
      id: route.query.id
    }
  })
  .then(res=>{
    formData.id = res.data.data[0].id;
    formData.equipment_name = res.data.data[0].equipment_name;
    formData.equipment_number = res.data.data[0].equipment_number;
    formData.equipment_status = res.data.data[0].equipment_status;
    formData.running_time = res.data.data[0].running_time;
    formData.temperature = res.data.data[0].temperature;
    formData.flow = res.data.data[0].flow;
    formData.liquid_level = res.data.data[0].liquid_level;
    formData.turbidity = res.data.data[0].turbidity;
    formData.concentration = res.data.data[0].concentration;
    formData.filtration_speed = res.data.data[0].filtration_speed;
    formData.pressure_change = res.data.data[0].pressure_change;
    formData.wine_clarity = res.data.data[0].wine_clarity;
    formData.microorganism_index = res.data.data[0].microorganism_index;
    formData.flow_sensor = res.data.data[0].flow_sensor;
    formData.microorganism_detection = res.data.data[0].microorganism_detection;
    formData.pressure_sensor = res.data.data[0].pressure_sensor;
    formData.regular_sampling_detection = res.data.data[0].regular_sampling_detection;
    formData.operation_time = res.data.data[0].operation_time; 
    formData.operators = res.data.data[0].operators;
    formData.ticketNumber = res.data.data[0].ticketNumber;
    formData.modelValue = res.data.data[0];
    console.log('过程监控反填数据:', res.data);
  })
};



// // 保存主表单
 const addjihau = () => {
  axios.post('https://localhost:7229/api/ProcessMonitoring/UpdateProcessMonitoring', formData)
    .then(response => {
     if (response.data.code === 200) {
       ElMessage.success('过程监控修改成功');
       console.log(response.data.data);
       router.push("/GetProcessMonitoring");
    } else {
       ElMessage.error(`过程监控修改失败：${response.data.message}`);
    }
    })
};

onMounted(()=>{
  getProductionById();
})











  // 主表单验证规则
  const rules = reactive({
    equipment_name: [
      { required: true, message: '设备名称不能为空', trigger: 'blur' }
    ],
    equipment_number: [
      { required: true, message: '设备编号不能为空', trigger: 'blur' }
    ],
    equipment_status: [
      { required: true, message: '设备状态不能为空', trigger: 'blur' }
    ],
    running_time: [
      { required: true, message: '运行时间不能为空', trigger: 'blur' }
    ],
    temperature: [
      { required: true, message: '温度不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '温度不能小于0', trigger: 'blur' }
    ],
    pressure: [
      { required: true, message: '压力不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '压力不能小于0', trigger: 'blur' }
    ],
    flow: [
      { required: true, message: '流量不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '流量不能小于0', trigger: 'blur' }
    ],
    liquid_level: [
      { required: true, message: '液位不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '液位不能小于0', trigger: 'blur' }
    ],
    turbidity: [
      { required: true, message: '浊度不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '浊度不能小于0', trigger: 'blur' }
    ],
    concentration: [
      { required: true, message: '浓度不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '浓度不能小于0', trigger: 'blur' }
    ],
    filtration_speed: [
      { required: true, message: '过滤速度不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '过滤速度不能小于0', trigger: 'blur' }
    ],
    pressure_change: [
      { required: true, message: '压力变化不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '压力变化不能小于0', trigger: 'blur' }
    ],
    wine_clarity: [
      { required: true, message: '酒液澄清度不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '酒液澄清度不能小于0', trigger: 'blur' }
    ],
    microorganism_index: [
      { required: true, message: '微生物指标不能为空', trigger: 'blur' },
      { type: 'number', min: 0, message: '微生物指标不能小于0', trigger: 'blur' }
    ],
    flow_sensor: [
      { required: true, message: '流量传感器不能为空', trigger: 'blur' }
    ],
    microorganism_detection: [
      { required: true, message: '微生物检测不能为空', trigger: 'blur' }
    ],
    pressure_sensor: [
      { required: true, message: '压力传感器不能为空', trigger: 'blur' }
    ],
    regular_sampling_detection: [
      { required: true, message: '定期取样检测不能为空', trigger: 'blur' }
    ],
    operation_time: [
      { required: true, message: '操作时间不能为空', trigger: 'blur' }
    ],
    operators: [
      { required: true, message: '操作人不能为空', trigger: 'blur' }
    ],
    bomSubject: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ],
    productName: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ],
    documentNo: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ],
  });
 
  //设备状态
  const workOrderTypeOptions = ref([
    { value: '正常运行', label: '正常运行' },
    { value: '故障', label: '故障' },
    { value: '待机', label: '待机' },
    { value: '维护中', label: '维护中' },
  ]);
  //流量传感器
  const workOrderTypeOptions5 = ref([
    { value: '稳定流量', label: '稳定流量' },
    { value: '动态流量', label: '动态流量' },
    { value: '流量异常报警', label: '流量异常报警' },
    { value: '设备故障报警', label: '设备故障报警' },
    { value: '休眠状态', label: '休眠状态' },
  ]);
  //微生物检测
  const workOrderTypeOptions6 = ref([
    { value: '通过', label: '通过' },
    { value: '未通过', label: '未通过' },
    { value: '待审核', label: '待审核' },
    { value: '审核中', label: '审核中' },
  ]);
  //压力传感器
  const workOrderTypeOptions7 = ref([
    { value: '正常工作', label: '正常工作' },
    { value: '过载', label: '过载' },
    { value: '故障', label: '故障' },
    { value: '休眠', label: '休眠' },
  ]);
    </script>
    
    <style scoped>
    .production-plan {
      padding: 30px;
      background-color: #f0f2f5;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      font-family: 'Arial', sans-serif;
    }
    
    .title {
      text-align: center;
      margin-bottom: 30px;
      color: #2c3e50;
      font-size: 24px;
      font-weight: 600;
    }
    
    .save-button {
      display: block;
      margin: 0 auto 30px;
      padding: 12px 24px;
      font-size: 16px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .form-container {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    
    .el-form-item__label {
      color: #34495e;
      font-size: 16px;
      font-weight: 500;
    }
    
    .el-input,
    .el-input-number,
    .el-date-picker {
      border-radius: 6px;
      border: 1px solid #ccc;
      padding: 10px;
      font-size: 14px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .el-input:focus,
    .el-input-number:focus,
    .el-date-picker:focus {
      border-color: #42b983;
      outline: none;
      box-shadow: 0 0 5px rgba(66, 185, 131, 0.2);
    }
    </style>